<template>
  <div class="page-line-chart">
    <h4 class="page-line" style="margin-left: 2%">
      <div>
      <div style="display:inline">报警趋势</div>
      <div style="margin-left: 15% ; display:inline">近7日危险源报警次数统计</div>
      </div>
    </h4>
    <div class="line">
    <ve-line :colors="colors" :data="chartData" :extend="chartExtend" :settings="chartSettings"></ve-line>
    </div>
  </div>
</template>

<script>


import {getBjcl} from "@/api/mmhi/dcsalarminfo";

export default {
  data() {
    this.chartSettings = {
      labelMap: {
        bj: '报警数',
        cl: '已处理数'
      }
    };
    return {
      colors: ["red","#3CB371"],
      chartData: {},
      chartExtend:{}
    }
  },
  created() {
    this.getBjclCount()
  },
  methods:{
    getBjclCount() {
      getBjcl().then(res => {
        let data1 = res.data.data
        this.chartData= {
          columns: ['createTime', 'bj','cl'],
          rows: data1
        }

      })
    }

  }
};
</script>
<style>
.page-line{
  color:#3CB371;
  font-weight:lighter;
}
.line{
  width: 800px;
}
</style>
